<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>
    <input type="text" v-model="name">
    <div>name: {{ name }}</div>
    <input type="text" v-model="age">
    <div>age: {{ age }}</div>
    <input type="text" v-model="job">
    <div>job: {{ job }}</div>
    <hr>
    <div>intro: {{ intro }}</div>


  </div>
</template>

<script>
import { ref, watch, watchEffect } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {
    // watch参数一,放数组
    // 需求: 生成一句话 `我叫${赵四},今年${44},是个${舞王}`
    let name = ref('葛晨')
    let age = ref(250)
    let job = ref('南通王')
    let intro = ref(`我叫${name.value},今年${age.value},是个${job.value}`)
    

    // watch(name,(nval) => {
    //   intro.value = `我叫${nval},今年${age.value},是个${job.value}`
    // })
    // watch(age,(nval) => {
    //   intro.value = `我叫${nval},今年${age.value},是个${job.value}`
    // })
    // watch(job,(nval) => {
    //   intro.value = `我叫${nval},今年${age.value},是个${job.value}`
    // })

    // watch([name,age,job], (nval) => {
    //   intro.value = `我叫${navl[0]},今年${nval[1]},是个${nval[2]}`
    // })

    // watchEffect 有点像computed
    // 在watchEffect会自动寻找依赖的数据,当依赖的数据发生变化的时候,自动执行这个回调
    watchEffect(() => {
      intro.value = `我叫${name.value},今年${age.value},是个${job.value}`
    })


    return {
      name,
      age,
      job,
      intro
    }
    }

   
  
}
</script>

<style scoped >

</style>